<!--  -->
<template>
  <div class="shop-manage">
    <van-nav-bar title="商品橱窗" @click-left="toRouter('back')" fixed placeholder>
      <template #left><van-icon name="arrow-left" size="18" color="#333" /></template>
    </van-nav-bar>
    <!--  -->
    <div class="shop-handle">
      <van-cell center>
        <template #title>
          <p>已选择{{checked.length}}个商品</p>
        </template>
        <template #right-icon>
          <van-button size="small" round plain @click="handleCheck">移出橱窗</van-button>
          <van-button size="small" round plain @click="handleCheck('prodClassify')">分类至</van-button>
        </template>
      </van-cell>
    </div>
    <!--  -->
    <van-list
      v-model:loading="state.loading"
      :finished="state.finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-checkbox-group v-model="checked" ref="checkboxGroup">
      <div class="flex prod-item" v-for="(item, index) in state.list" :key="item">
        <van-checkbox :name="index" checked-color="#FE2E4E" />
        <div class="flex__item">
          <van-card
            :thumb="item.imageUrl"
            @click="toRouter({name: 'prodDetail', query: { pdId: item.pdId, userProductId: item.userProductId, admin: true }})"
          >
            <template #title><h2 class="van-ellipsis">{{item.userTitle || item.title}}</h2></template>
            <template #desc>
              <p class="van-card__desc van-ellipsis">{{item.sysCategory || '未分类'}}</p>
              <p class="van-card__desc van-ellipsis">赚￥64.5</p>
              <van-button class="edit-btn" size="small" round plain @click.stop="toRouter('prodEdit', item)">编辑</van-button>
            </template>
            <template #price>
              <strong class="clr-red">￥<span style="font-size: 16px;">{{item.price}}</span></strong>
            </template>
          </van-card>
        </div>
      </div>
      </van-checkbox-group>
    </van-list>
    <!--  -->
    <van-action-bar class="footer-bar">
      <van-action-bar-button type="info" plain text="全部取消" @click="cancelAll" />
      <van-action-bar-button type="danger" color="#FE2E4E" @click="toRouter('prodAdd')" text="添加商品" />
    </van-action-bar>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'
import {
  getMyShopListByCategoryId,
  delProductInMyShop
} from '@api'
export default {
  name: 'shopManage',
  setup () {
    // const { ctx } = getCurrentInstance()
    // ctx.$api.getMyShopList()
    const router = useRouter()
    const store = useStore()
    console.log(store.getters.userId)

    const state = reactive({
      list: [],
      loading: false,
      finished: false,
      pageNum: 0
    })
    const onLoad = () => {
      // Toast.loading()
      getMyShopListByCategoryId({
        pageNum: state.pageNum
      }).then(res => {
        const { content, pageNo, totalPages } = res.content
        console.log(content)
        state.list = state.list.concat(content)
        state.pageNum = pageNo + 1
        state.loading = false
        if (pageNo + 1 >= totalPages) {
          state.finished = true
        }
      })
    }

    const checked = ref([])
    const checkboxGroup = ref(null)
    const cancelAll = () => {
      checkboxGroup.value.toggleAll(false)
    }
    const handleCheck = (path) => {
      if (checked.value.length > 0) {
        const arr = []
        checked.value.forEach(index => {
          arr.push(state.list[index].pdId)
        })
        if (path) {
          // 分类至
          router.push({ name: path, query: { pdIds: arr.join(',') } })
          store.commit('SET_DETAIL', {})
        } else {
          // 移出橱窗
          delProductInMyShop({
            pdIds: arr.join(',')
          }).then(res => {
            console.log(res)
            state.list = []
            state.pageNum = 0
            onLoad()
            cancelAll()
          })
        }
      } else {
        Toast('请先勾选商品')
      }
    }

    const toRouter = (path, item) => {
      switch (path) {
        case 'back':
          router.go(-1)
          break
        case 'prodEdit':
          store.commit('SET_DETAIL', item)
          router.push(path)
          break
        default:
          router.push(path)
      }
    }

    return {
      state,
      onLoad,
      checked,
      cancelAll,
      checkboxGroup,
      handleCheck,
      toRouter
    }
  }
}
</script>

<style scoped lang="scss">
@import './shopManage.scss';
</style>
